<template>
	<view>
		<view v-for="(i,index) in parm.child" :key="index">
			<view class="a-tree">
				<view class="title" @click="titlClick(index)">
					<view @tap.stop="checkboxGroup(index)">
						<checkbox :checked="i.checked" />
						{{i.lable}}
					</view>
					<view style="flex: 1;text-align: right;" v-show="parm.level < level">
						<text class="iconfont icon-icon-arrow-right2-copy" :class="i.$_show_child?'deg90':''"></text>
					</view>
				</view>
				<item :level='level' @updata="updata" :parm="{...i,$_index:index,level:parm.level+1}" :request="request" v-if="i.$_show_child"></item>
			</view>
		</view>
		<view class="loading" v-show="!(parm.child ||[]).length && !loading">
			没有数据
		</view>
		<view v-show="loading" class="loading">
			<view class="uni-load-more__img uni-load-more__img--android-MP">
				<view></view>
				<view></view>
				<view></view>
			</view>
			加载中
		</view>
	</view>
</template>


<script>
	export default {
		name: 'item',
		props: {
			level:{
				type:Number,
				default:0
			},
			request: {
				type: Function,
				async default () {
					return {
						data: []
					}
				}
			},
			parm:{
				type:Object,
				default(){
					return {
						child:[]
					}
				}
			}
		},
		created() {
			const {child = [],...parm} = this.parm;
			if(child.length) return ;
			this.request(parm).then(res => {
				const data = res.data.map(x => {
					return {
						...x,
						child: []
					}
				});
				this.$emit('updata',{
					...parm,
					child:data
				});
			}).finally(this.load());
		},
		data() {
			return {
				loading: false
			}
		},
		methods: {
			load() {
				this.loading = true;
				return e => {
					this.loading = false;
				}
			},
			titlClick(index) {
				if(!( this.parm.level < this.level )) return ;
				let e = {...this.parm};
				e.child[index].$_show_child = !e.child[index].$_show_child;
				this.$emit('updata',e);
			},
			updata({$_index,...o}){
				let e = {...this.parm};
				e.child[$_index] = o;
				this.$emit('updata',e);
			},
			checkboxGroup(index) {
				let e = {...this.parm};
				e.child[index].checked = !e.child[index].checked;
				const checked = e.child[index].checked;
				//递归勾选子集
				const s = a=>{
					a.filter(x=>{
						x.checked = checked;
						s(x.child || []);
					});
				}
				s(e.child[index].child || []);
				//计算勾选父级
				e.checked = e.child.every(x=>{
					return x.checked;
				});
				this.$emit('updata',e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.a-tree {
		margin: 0 0 0 25px;

		.title {
			display: flex;
			align-items: center;
			position: relative;
			padding: 10px 0;
			padding-right: 15px;
			margin-right: 20px;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				border-bottom: 1px solid rgba(0, 0, 0, 1);
				transform: scaleY(.2);
			}
		}

		.icon-icon-arrow-right2-copy {
			display: inline-block;
			&.deg90{
				transform: rotateZ(90deg);
			}
		}
	}

	.loading {
		text-align: center;
		line-height: 2.4em;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uni-load-more__img {
		width: 22px;
		height: 22px;
		margin-right: 8px;
	}

	.uni-load-more__img--android-MP {
		position: relative;
		width: 24px;
		height: 24px;
		transform: rotate(0deg);
		animation: loading-ios 1s 0s ease infinite;
	}

	.uni-load-more__img--android-MP>view {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: solid 2px transparent;
		border-top: solid 2px #777777;
		transform-origin: center;
	}

	.uni-load-more__img--android-MP>view:nth-child(1) {
		animation: loading-android-MP-1 1s 0s linear infinite;
	}

	.uni-load-more__img--android-MP>view:nth-child(2) {
		animation: loading-android-MP-2 1s 0s linear infinite;
	}

	.uni-load-more__img--android-MP>view:nth-child(3) {
		animation: loading-android-MP-3 1s 0s linear infinite;
	}

	@keyframes loading-android {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-android-MP-1 {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(90deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-android-MP-2 {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-android-MP-3 {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(270deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
